﻿
@{
    ViewBag.Title = "RoleHistory";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>RoleHistory</h2>


<div id="RoleGrid"></div>

<script id="delete-confirmation" type="text/x-kendo-template">

    <p class="delete-message">“Are you sure you want to delete the records?”</p>

    <button class="delete-confirm k-button btn btn-default">Yes</button>

    <button class="delete-cancel  k-button btn btn-default">No</button>

</script>
<div id="saveConfirm" class="collapse alert alert-success alert-dismissible" role="alert">
    <i class="pull-left fa fa-check-circle fa-2x"></i>
    <button type="button" class="close"><span aria-hidden="true">&times;</span></button>
    <span>
        Your changes have been sucessfully saved.
    </span>
</div>
<script type="text/javascript">
    var gridInEditMode = false;
    var dataSource = new kendo.data.DataSource({

        transport: {
            read:  {
                url: "/CreateRole/GetRoles",
                    type: "get",
                    dataType: 'json'
            },

            create: {
                url: "/CreateRole/CreateRole",
        type: 'POST',
        dataType: "json",
        contentType: "application/JSON"

    },
        update: {
            url: "/CreateRole/UpdateRole",
        type: 'POST',
    dataType: "json",
    contentType: "application/JSON"
    },
    destroy: {
        url: "/CreateRole/DeleteRole",
            type: "POST",
            dataType: "json",
            contentType: "application/JSON"
    },
    parameterMap: function (options) {
        return kendo.stringify(options); // kendo.stringify serializes to JSON string
    }
    },

    pageSize: 10,
        schema: {
            model: {
                id: "Id",
                fields: {
                    id: {
                        editable: false, nullable: true,
                        type: "int"
                    },
                    Description:
                        {
                            type: "string"
                        },

                    RoleName:
                        {
                            type:"string"
                        },
                   

                    error: function (a) {
                        debugger;
                        $('#RoleGrid').data("kendoGrid").cancelChanges();
                    },

                }
            }
        }
    });
    function dateTimeEditor(container, options) {
        $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
        .appendTo(container)
        .kendoDateTimePicker({
            value: new Date()
        });
    }

   
    $("#RoleGrid").kendoGrid({
        dataSource: dataSource,
        scrollable: true,
        height: "250px",
        toolbar: ["create"], // "save", "cancel"],
        excel: {
            allPages: true,
            fileName: "RoleExport.xlsx"
        },
        pageable: true,
        height: 300,
        columns: [

      { field: "RoleName", title: "Role Name", filterable: false, width: "8em" },
      { field: "Description", title: "Description", width: "8em" },
     

      {
          title: "&nbsp;",
          width: "25em",
          command: [

              "edit",
              {
                  name: "Delete",
                  click: function (e) {
                      debugger;
                      var tr = $(e.target).closest("tr"); //get the row for deletion
                      var dataItem = this.dataItem(tr); //get the row data so it can be referred later
                      //see what is coming in dataItem
                      //if (dataItem > 0) {
                      //    $("#delValidation").addClass('in')
                      //}
                      //else {

                      deleteTopicConfirmation(e, this);
                      ////}
                      return false;
                  }
              }
          ]
      }
        ],
        filterable: {
            extra: false,
            operators: {
                string: {
                    eq: "Is equal to",
                    neq: "Is not equal to",
                    contains: "Contains"
                }
            }
        },

        editable: "popup",
        sortable: {
            mode: "single",
            allowUnsort: false
        },
        edit: function (e) {


            gridInEditMode = true;
        },
        selectable: true,
        cancel: function () {

            gridInEditMode = false;
        }
    });
   
    dataSource.bind("requestEnd", showSuccessMessage);
    function showSuccessMessage(e) {

        if (e.type === "update" || e.type === "create") {
            gridInEditMode = false;
            $("#saveConfirm").addClass('in');
            e.sender.read();
        }
    }
    $(".close").click(function () {
        debugger;
        $(this).parent().removeClass('in');
    });
    function deleteTopicConfirmation(e, widget) {
        var grid = $('#RoleGrid').data("kendoGrid");
        deleteConfirmation(e, widget, grid);
    }

    function deleteConfirmation(e, widget, grid) {

        var currentRow = $(e.target).closest("tr"); //get the row for deletion

        var currentRowData = widget.dataItem(currentRow); //get the row data so it can be  referred later

        var kendoWindow = $("<div />").kendoWindow({

            title: "Confirmation",
            resizable: true,
            modal: true,
            width: "400px"
        });

        kendoWindow.data("kendoWindow")

            .content($("#delete-confirmation").html())

            .center().open();

        kendoWindow

            .find(".delete-confirm,.delete-cancel")
            .click(function () {
                if ($(this).hasClass("delete-confirm")) {
                    grid.dataSource.remove(currentRowData);
                    grid.dataSource.sync();
                }
                $(this).closest("[data-role=window]").kendoWindow("close");

            });
    }

</script>